<template>
    <el-row class="home" :gutter="20">
        <el-col :span="8" style="margin-top: 20px">
            <el-card shadow="hover">
                <div class="user">
                    <img class="picture" :src="userImg" />
                    <div class="userInfo">
                        <p class="name">{{ user.userName }}</p>
                        <p class="access">{{ user.nickName }}</p>
                    </div>
                </div>
                <div class="loginInfo">
                    <p>
                        上次登录时间：<span>{{ parseTime(user.loginDate) }}</span>
                    </p>
                    <p>
                        上次登录地点：<span>{{ user.loginPosition }}</span>
                    </p>
                </div>
            </el-card>
            <el-card shadow="hover" style="margin-top: 20px; height: 440px">
                <el-table :data="tableData" stripe>
                    <el-table-column v-for="(item, index) in tableLabel" :key="index" :prop="index" :label="item"> </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col style="margin-top: 20px" :span="16">
            <div class="num">
                <el-card shadow="hover" v-for="item in countData" :key="item.name" :body-style="{ display: 'flex', padding: 0 }">
                    <i class="icon" :class="'el-icon-' + item.icon" :style="{ background: item.color }"></i>
                    <div class="detail">
                        <p class="num">￥{{ item.value }}</p>
                        <p class="txt">{{ item.name }}</p>
                    </div>
                </el-card>
            </div>
            <el-card shadow="hover" style="height: 264px">
                <!--        <div style="height: 284px" ref="echarts"></div>-->
                <Echarts :chart-data="echartData.order" style="height: 264px"></Echarts>
            </el-card>
            <div class="graph">
                <el-card shadow="hover" style="height: 260px">
                    <!--          <div style="height: 240px" ref="userEcharts"></div>-->
                    <Echarts :chart-data="echartData.user" style="height: 240px"></Echarts>
                </el-card>
                <el-card shadow="hover" style="height: 260px">
                    <!--          <div style="height: 240px" ref="videoEcharts"></div>-->
                    <Echarts :chart-data="echartData.video" :is-axis-chart="false" style="height: 240px"></Echarts>
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import { getMenu } from '@/api/data'
import Echarts from '@/views/home/Echarts'
import store from '@/store'

export default {
    components: {
        Echarts
    },
    data() {
        return {
            userImg: this.$store.getters.avatar,
            user: this.$store.getters.user,
            countData: [
                {
                    name: '今日支付订单',
                    value: 1234,
                    icon: 'success',
                    color: '#2ec7c9'
                },
                {
                    name: '今日收藏订单',
                    value: 210,
                    icon: 'star-on',
                    color: '#ffb980'
                },
                {
                    name: '今日未支付订单',
                    value: 1234,
                    icon: 's-goods',
                    color: '#5ab1ef'
                },
                {
                    name: '本月支付订单',
                    value: 1234,
                    icon: 'success',
                    color: '#2ec7c9'
                },
                {
                    name: '本月收藏订单',
                    value: 210,
                    icon: 'star-on',
                    color: '#ffb980'
                },
                {
                    name: '本月未支付订单',
                    value: 1234,
                    icon: 's-goods',
                    color: '#5ab1ef'
                }
            ],
            tableData: [
                {
                    name: 'oppo',
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800
                },
                {
                    name: 'vivo',
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800
                },
                {
                    name: '苹果',
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800
                },
                {
                    name: '小米',
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800
                },
                {
                    name: '三星',
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800
                },
                {
                    name: '魅族',
                    todayBuy: 100,
                    monthBuy: 300,
                    totalBuy: 800
                }
            ],
            tableLabel: {
                name: '课程',
                todayBuy: '今日购买',
                monthBuy: '本月购买',
                totalBuy: '总购买'
            },
            // 折线图数据
            echartsData: [],
            // 柱状图数据
            userData: [
                {
                    date: '周一',
                    new: 5,
                    active: 200
                },
                {
                    date: '周二',
                    new: 10,
                    active: 500
                },
                {
                    date: '周三',
                    new: 12,
                    active: 550
                },
                {
                    date: '周四',
                    new: 60,
                    active: 800
                },
                {
                    date: '周五',
                    new: 65,
                    active: 550
                },
                {
                    date: '周六',
                    new: 53,
                    active: 770
                },
                {
                    date: '周日',
                    new: 33,
                    active: 170
                }
            ],
            // 饼图数据
            videoData: [
                {
                    name: '小米',
                    value: 2999
                },
                {
                    name: '苹果',
                    value: 5999
                },
                {
                    name: 'vivo',
                    value: 1500
                },
                {
                    name: 'oppo',
                    value: 1999
                },
                {
                    name: '魅族',
                    value: 2200
                },
                {
                    name: '三星',
                    value: 4500
                }
            ],
            echartData: {
                order: {
                    xData: [],
                    series: []
                },
                user: {
                    xData: [],
                    series: []
                },
                video: {
                    series: []
                }
            }
        }
    },
    created() {
        this.echartDataInit()
        // this.getInfo()
    },
    methods: {
        echartDataInit() {}
        // getInfo(){
        //   this.$store.dispatch("GetInfo");
        // },
    }
    /*mounted() {
    getMenu().then(res => {
      if (res.status == 200) {
        this.echartsData = res.data
        const nameData = [];
        const idData = []
        this.echartsData.forEach(key => {
          nameData.push(key.loginName)
          idData.push(key.id)
        })
        const keyArray = Object.keys(idData)
        const series = []
        keyArray.forEach(key => {
          series.push({
            name: key,
            data: keyArray.map(item => item[key]),
            type: 'line'
          })
        })
        // 折线图
        /!*const option = {
          xAxis: {
            data: nameData
          },
          yAxis: {},
          legend: {
            data: keyArray
          },
          series
        }
        const E = echarts.init(this.$refs.echarts)
        E.setOption(option)*!/
        this.echartData.order.xData = nameData
        this.echartData.order.series = series

        // 用户柱状图
        /!*const userOptions = {
          legend: {
            // 图例文字颜色
            textStyle: {
              color: "#333",
            },
          },
          grid: {
            left: "20%",
          },
          // 提示框
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category", // 类目轴
            data: this.userData.map(item => item.date),
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
            axisLabel: {
              interval: 0,
              color: "#333",
            },
          },
          yAxis: [
            {
              type: "value",
              axisLine: {
                lineStyle: {
                  color: "#17b3a3",
                },
              },
            },
          ],
          color: ["#2ec7c9", "#b6a2de"],
          series: [
            {
              name: '新增用户',
              data: this.userData.map(item => item.new),
              type: 'bar'
            },
            {
              name: '活跃用户',
              data: this.userData.map(item => item.active),
              type: 'bar'
            },
          ],
        }
        const U = echarts.init(this.$refs.userEcharts)
        U.setOption(userOptions)*!/
        this.echartData.user.xData = this.userData.map(item => item.date)
        this.echartData.user.series = [
          {
            name: '新增用户',
            data: this.userData.map(item => item.new),
            type: 'bar'
          },
          {
            name: '活跃用户',
            data: this.userData.map(item => item.active),
            type: 'bar'
          },
        ]
        // 饼图
        /!*const videoOptions = {
          tooltip: {
            trigger: "item",
          },
          color: [
            "#0f78f4",
            "#dd536b",
            "#9462e5",
            "#a6a6a6",
            "#e1bb22",
            "#39c362",
            "#3ed1cf",
          ],
          series: [
            {
              data: this.videoData,
              type: 'pie'
            }
          ]
        }
        const V = echarts.init(this.$refs.videoEcharts)
        V.setOption(videoOptions)*!/
        this.echartData.video.series = [
          {
            data: this.videoData,
            type: 'pie'
          }
        ]
      }
    })
  }*/
}
</script>
